<%@ page pageEncoding="UTF-8"%>
<script type="text/x-template" id="add_level">
	<div class="_add_level">
        <div class="_pop-container">
            <div class="_top">
                添加级别
            </div>
            <div class="_content">
                <div class="_each-content">
                    <span class="_title">级别: </span>
                    <input class="_input" type="text" v-model="level">
                </div>
                <div class="_each-content">
                    <span class="_title">描述: </span>
                    <textarea class="_input" type="text" v-model="content"></textarea>
                </div>
                <div class="_each-content" style="position: relative">
                    <span class="_title">颜色: </span>
                    <div class="_input" id="bar" @click="changeShowColor()">
                    </div>
                    <div class="_color" v-show="showColor">
                        <div id="picker"></div>
                        <div id="slider"></div>
                    </div>
                </div>
                <div class="_each-content">
                    <span class="_title"></span>
                    <div class="_submit-container">
                        <div class="_submit" @click="submit()">确定</div>
                    </div>
                </div>
            </div>
            <img class="_close" src="/images/components/add_member/ic-close.png" alt="" @click="closeAddMember()">
        </div>
	</div>
</script>
<script src="/js/components/colorpicker.min.js"></script>
<script>
    function setTextColor(picker) {
        document.querySelector("button._input").style.color = '#' + picker.toString();
        state.color = '#' + picker.toString();
    }
	var addLevel = {
		template: "#add_level",
		data: function() {
			return {
                level: "",
                content: "",
                color: "",
                showColor: false,
            };
		},
        methods: {
            changeShowColor: function() {
                this.showColor = !this.showColor;
            },
            closeAddMember: function() {
                this.$dispatch("closeEditTagShow");
            },
            submit: function() {
                var self = this;
                var level = this.level.trim();
                var content = this.content.trim();
                if (!/^.{1,3}$/.test(level)) {
                    this.$dispatch("danger", "级别为1-3位");
                    return;
                }
                if (!/^.{1,20}$/.test(content)) {
                    this.$dispatch("danger", "描述为1-20位");
                    return;
                }
                if (!this.color) {
                    this.$dispatch("danger", "请选择颜色");
                    return;
                }
                $.ajax({
                    type: "post",
                    url: "level_describe.jsp",
                    data: {
                        act: "addLevel",
                        operator_id: "${user.getId()}",
                        operator_name: "${user.getName()}",
                        hospital: ${user.hospital},
                        name: level,
                        condition: content,
                        color: this.color,
                    },
                    success: function (res) {
                        res = JSON.parse(res);
                        console.log(res);
                        if (res.errcode == "0") {
                            self.$dispatch("addLevel");
                        }
                    }
                })
            }
        },
        ready: function() {
		    var self = this;
            ColorPicker(
                document.getElementById('slider'),
                document.getElementById('picker'),
                function(hex, hsv, rgb) {
                    self.color = "rgb(" + rgb.r + ", " + rgb.g + ", " + rgb.b + ")";
                    document.querySelector("#bar").style.backgroundColor = "rgb(" + rgb.r + ", " + rgb.g + ", " + rgb.b + ")";        // #HEX
                }
            );
        }
	}
</script>
<style>
    #picker {
        display: inline-block;
        width: 100px;
        height: 100px;
        vertical-align: top;
    }
    #slider {
        display: inline-block;
        width: 20px;
        height: 100px;
        vertical-align: top;
    }
    #bar {
        height: 40px;
        vertical-align: top;
    }
    ._add_level ._color {
        position: absolute;
        right: 100px;
        top: 40px;
    }
    ._add_level {
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        background: rgba(0, 0, 0, .4);
        z-index: 10;
        font-size: 18px;
    }
    ._add_level ._pop-container {
        position: absolute;
        top: 50%;
        left: 0;
        right: 0;
        margin: auto;
        width: 500px;
        transform: translateY(-50%);
        -webkit-transform: translateY(-50%);
    }
    ._add_level ._top {
        background: #e6eaf5;
        color: #333;
        line-height: 80px;
        font-size: 20px;
        text-align: center;
    }
    ._add_level ._content {
        padding: 40px 0;
        text-align: center;
        background: #fff;
    }
    ._add_level ._input {
        display: inline-block;
        padding: 8px 20px;
        margin-bottom: 20px;
        width: 300px;
        line-height: 22px;
        box-sizing: border-box;
        border: 1px solid #C8CACD;
        vertical-align: top;
        resize: none;
    }
    ._add_level ._submit-container {
        display: inline-block;
        width: 300px;
        text-align: left;
    }
    ._add_level .single-selected-container .single-selected-show {
        border: 0;
    }
    ._add_level .multi-selected-container .multi-selected-show {
        border: 0;
    }
    ._add_level ._title {
        display: inline-block;
        line-height: 40px;
        width: 63px;
    }
    ._add_level ._submit {
        display: inline-block;
        padding: 6px 30px;
        background: #3f8dfa;
        border-radius: 4px;
        color: #fff;
    }
    ._add_level ._close {
        position: absolute;
        width: 30px;
        height: 30px;
        right: -15px;
        top: -15px;
        cursor: pointer;
    }
</style>
